<!-- 商品专题 -->
<template>
	<!-- [0].goodsId -->
	<view class="shop-special shadow" v-if="list.length > 0">
		<view class="shop-special-row" v-for="(item, inx) in list" :key="inx">
			<scroll-view class="scroll-special-row" :scroll-x="true" :scroll-with-animation="true">
				<view class="scroll-special-row-item" v-for="(val, i) in item.goods" :key="i" @click="goodsBtn(val)">
					<view class="image-radius">
						<image :src="$Utils.img(val.sku_image)" mode="aspectFill" :lazy-load="true"></image>
					</view>
					<view class="special-row-title line-text">{{ val.sku_name }}</view>
					<view class="special-row-price">￥{{ val.price }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'shop-special',
	data() {
		return {};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	mounted() {
		// console.log('listlistlist', this.list);
	},
	methods: {
		goodsBtn(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					is_id: val.sku_id,
					type: 1
				}
			})
		}
	}
};
</script>

<style lang="scss">
.shop-special {
	padding: 0 30rpx;
	.shop-special-row {
		margin-top: 20rpx;
		// margin-bottom: 10rpx;
		padding: 30rpx 28rpx 0;
		background-color: #ffffff;
		border-radius: 10rpx;
		// border-bottom-left-radius: 20rpx;
		// border-bottom-right-radius: 20rpx;
		.scroll-special-row {
			white-space: nowrap;
			width: 100%;
			.scroll-special-row-item {
				display: inline-block;
				width: 140rpx;
				margin-right: 25rpx;
			}
			.scroll-special-row-item:last-child{
				margin-right: 0rpx;
			}
			.image-radius {
				width: 100%;
				height: 200rpx;
			}
			.special-row-title {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
				margin: 16rpx 0;
			}
			.special-row-price {
				width: 100%;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff364e;
				margin-bottom: 16rpx;
			}
		}
	}
}
image{
	width: 100%;
	height: 100%;
}
</style>
